<template>
  <div class="Rightlucn_box">
    <!-- 标题 -->
    <div class="_Rimg_boxs">
      <div class="_RMtxt">植物IUCN红色名录统计</div>
      <br />
      <div class="_RMtxts">Top10 most frequently found species</div>
    </div>
    <div class="Riucn_chart">
      <mychart :option="option" id="Riucn" width="4.77rem" height="1.3rem"></mychart>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import mychart from "./mychart.vue";
export default {
  components: { mychart },
  props:['Plantiucn'],
  data() {
    return{
      plantiucn:this.Plantiucn,
      option:{},
    }
  },
  created() {
  },
mounted() {
  this.getData()
},
  methods: {
    getData(){
      let x= [] ; let y = [] 
      let e = ['近危' , '易危' ,'濒危' , '灭绝' , '极危' , '无危']
      for(let key in this.plantiucn){
        x.push(key)
        y.push(this.plantiucn[key])
      }
      x.map(item=>{
        if(item.includes('i')){
          return
        }else[
          e.push(item)
        ]
      })
      // console.log(e , y);
      this.drawbar(e,y)
    },
    drawbar(e , y){
      this.option = {
        grid: {
          left: "0%",
          top: "5%",
          right: "2%",
          bottom: "0%",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        xAxis: {
          data: e,
          type: "category",
          axisLine: {
            // 坐标轴 轴线
            show: false // 是否显示
          },
          axisTick: {
            show: false,
            alignWithLabel: false,
          },
          axisLabel: {
            textStyle: {
              show: false,
              fontFamily: "PingFang",
              // color: '#5DCFF6',
              color:" rgba(255, 255, 255, 0.80)",
              fontSize: ".14rem",
            }
          },
        },
        yAxis: {
          type: "value",
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,0.2)",
            },
          },
          axisLabel: {
            textStyle: {
              show: false,
              fontFamily: "PingFang",
              // color: '#5DCFF6',
              color:" rgba(255, 255, 255, 0.80)",
              fontSize: ".14rem",
          },
        }
        },
        series: [
          {
            data: y,
            name: "",
            type: "line",
            symbol: "none",
            symbol: "emptyCircle",
            smooth: true,
            symbolSize: 7,
            lineStyle: {
              width: 1,
              type: "solid",
            },
            itemStyle: {
              borderWidth: 1,
              borderColor: "#F4F65B",
              color: "#F4F65B",
            },
            areaStyle: {
              color: "#F4F65B",
                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      // color: 'RGBA(184, 204, 241, 1)'
                      color: "#FFF27F",
                    },
                    {
                      offset: 0.5,
                      // color: 'RGBA(184, 204, 241, 0.5)'
                      color: "#FFF27F",
                    },
                    {
                      offset: 1,
                      color: "#0D152F",
                      // color: '#283D46'
                    },
                  ],
                  false
                ),
                shadowBlur: 0, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
            },
          },
        ],
      }
    }
  },
}
</script>
<style >
@import "../../../static/newcss/myRightiucn.css";
</style>